Instrucciones
Modificar el reloj del ejemplo anterior para que presente:
- Horas, minutos, segundos y milisegundos con el formato:
- 12 horas, 23 minutos, 10 segundos, 123 ms.
Se recomienda variar el intervalo del evento a 1 ms.
- Utilizar métodos que extraen de un objeto Date: horas, min., seg. y ms. getHours(), getMinutes(), getSeconds() y getMilliseconds()
- Tutorial Date: https://developer.mozilla.org/en-S/docs/Web/JavaScript/Reference/Global_Objects/Date
- Modificar el formato de presentación en mostrar_hora().
Hacer que el reloj pare al hacer click sobre él (si está en marcha)
- Y que vuelva a arrancar al hacer click sobre él cuando esté parado.
- Utilizar addEventListener(...) para añadir manejadores.
Tutorial timers: https://developer.mozilla.org/en/docs/Web/API/EventTarget.addEventListener
Diseño
<script type="text/javascript">
// Se declaran las variables
var myVar; //esta variable controla la activacion y desactivacion del reloj
var i = document.getElementById('image'); // variable asignada al objeto listener
// funcion principal
function myFunction() {
var d = new Date(); // Variable que almacena la fecha
var x = document.getElementById("demo"); // Se captura el id del objeto
var h = d.getHours(); // Obtenemos la hora de la fecha
if (h < 10) // Si es menor de 10, insertamos un cero al principio
h = '0' + h;
var m = d.getMinutes(); // Obtenemos los minutos
if (m < 10)
m = '0' + m;
var s = d.getSeconds(); // Obtenemos los segundos
if (s < 10)
s = '0' + s;
x.innerHTML = h + ":" + m + ":" + s;// String con el que se mostrara en pantalla
}
// Funcion que activa el reloj
function activar(){
myVar = setInterval(myFunction, 1000);
}
// funcion que desactiva el reloj
function desactivar(){
clearInterval(myVar);
}
// Objetos listener
i.addEventListener('dblclick', activar);
i.addEventListener('click', desactivar);
</script>
Resultado
00:00:00
click -> off
dblclick -> on